﻿@model PublicInfoModel

<link rel="stylesheet" type="text/css" asp-src="/Plugins/Widgets.Slider/Assets/vue-style.css"/>

<b-carousel id="GrandCarousel" fade controls indicators img-width="1024" img-height="267" :interval="6000">
    @foreach (var item in Model.Slide)
    {
        if (string.IsNullOrEmpty(item.PictureUrl))
        {
            <b-carousel-slide height="500" img-blank img-alt="Blank image" caption-html="@item.Description"
                              @if (item.FullWidth)
                              {
                                  <text> data-width="full" </text>
                              }
                              @if (!string.IsNullOrEmpty(item.Link))
                              {
                                  <text> class="link" onclick="window.location='@item.Link'" </text>
                              }>
            </b-carousel-slide>
        }
        else
        {
            <b-carousel-slide text-html="@item.Description"
                              @if (item.FullWidth)
                              {
                                  <text> data-width="full" class="img-desc wide-img @if (!string.IsNullOrEmpty(item.Link)) { <text> link </text> }" </text>
                              }
                              else
                              {
                                  <text> class="img-desc no-wide-img @if (!string.IsNullOrEmpty(item.Link)) { <text> link </text> }" </text>
                              }
                              @if (!string.IsNullOrEmpty(item.Link))
                              {
                                  <text> onclick="window.location='@item.Link'" </text>
                              }>
                <template #img>
                    <picture>
                        <source media="(max-width: 767px)" sizes="1px" srcset=" 1w"/>
                        <img class="d-block img-fluid" width="1920" height="500" src="@item.PictureUrl" data-thumb="@item.PictureUrl" data-transition="" alt="@item.Name" title=""/>
                    </picture>
                </template>
            </b-carousel-slide>
        }
    }
</b-carousel>